import React from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import Cell from './Cell';
import './Time.less';

class Time extends React.Component {
    displayName = 'Time';

    renderHours () {
        const {current, format, disabledTime} = this.props;
        const itemCurrent = current[0];
        const display = format.indexOf('h') !== -1;
        return <Cell display={display} time={current} current={itemCurrent} disabledTime={disabledTime} type='hour' onChange={this.onChangeTime.bind(this, 0)}/>;
    }

    onChangeTime = (type, num) => {
        const {current} = this.props;
        current[type] = num;
        this.props.onChange && this.props.onChange(current);
    }

    renderMinutes () {
        const {current, format, disabledTime} = this.props;
        const itemCurrent = current[1];
        const display = format.indexOf('m') !== -1;
        return <Cell display={display} time={current} current={itemCurrent} disabledTime={disabledTime} type='minute' onChange={this.onChangeTime.bind(this, 1)}/>;
    }

    renderSeconds () {
        const {current, format, disabledTime} = this.props;
        const itemCurrent = current[2];
        const display = format.indexOf('s') !== -1;
        return <Cell display={display} time={current} current={itemCurrent} disabledTime={disabledTime} type='second' onChange={this.onChangeTime.bind(this, 2)}/>;
    }

    render () {
        const {className, style, format} = this.props;
        const clazzName = classNames('cm-time-picker-options', className);
        return <div className={clazzName} style={style}>
            {this.renderHours()}
            {this.renderMinutes()}
            {this.renderSeconds()}
        </div>;
    }
}

export default Time;
